<template>
  <div>
    <el-select :disabled="disabled" :value="value" @change="handleChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        :label="item.name"
      />
    </el-select>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Number, Array],
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    field: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters(['dict', 'enum']),
    options() {
      if (this.type === 'dict') {
        return (this.dict[this.field] || []).map(el => {
          return {
            name: el.name,
            value: el.code
          }
        })
      } else if (this.type === 'enum') {
        return (this.enum[this.field] || []).map(el => {
          return {
            name: el.name,
            value: el.value
          }
        })
      }
      return []
    }
  },
  methods: {
    handleChange(val) {
      console.log(val)
      this.$emit('change', val)
    }
  }
}
</script>

<style scoped>

</style>
